<template>
	<div>
		请输入宽度：
		<el-input v-model="rows" placeholder="请输入每行个数"  type="number" :max="15" style="width: 200px;"></el-input>
		请输入高度：
		<el-input v-model="columns" placeholder="请输入列数" type="number" :max="15"  style="width: 200px;"></el-input>
		<div class="big_div">
			<div class="div_row" v-for="(row,rowIndex) in seatData">
				<div class="row_content" v-for="(data,$index) in row"@click="closeRow(rowIndex,$index,data.isTrue)">
					<img src="../../assets/images/111.png" v-show="!data.isTrue">
					<img src="../../assets/images/222.png" v-show="data.isTrue">
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				rows: '',
				columns: '',
				seatData: [],
			}
		},
		watch:{
			columns(){
				this.addRow();
			},
			rows(){
				this.addRow();
			}
		},
		methods: {
			addRow() {
				this.seatData=[];
				for (let a = 0; a < this.columns; a++) {
					let rowArr = [];
					for (let i = 0; i < this.rows; i++) {
						let rowObj = {};
						rowObj.isTrue = false;
						rowArr.push(rowObj);
					}
					this.seatData.push(rowArr);
				}
			},
			closeRow(rowIndex, $index,isTrue) {
				this.seatData[rowIndex][$index].isTrue = !isTrue;
			},
		}
	}
</script>

<style lang="less" scoped>
	.big_div {
		background-color: #969696;
		width: 510px;
		height: 510px;
		.div_row {

			.row_content {
				width: 24px;
				height: 24px;
				border: 1px  dotted rgba(230,230,230,0.25);
				display: inline-block;
				margin: 5px 5px;
			}
		}
	}
</style>
